<template>
  <a-auto-complete
      v-model:value="value"
      :options="options"
      style="width: 400px"
      @change="inputChange"
      placeholder="请输入你感兴趣的内容:"
      :filter-option="filterOption"/>
  <button style="width: 56px;height: 32px"
          class="search-button">
    <search-outlined/>
  </button>
</template>
<script>
import {SearchOutlined} from '@ant-design/icons-vue';
import {defineComponent, ref} from 'vue';

export default defineComponent({
  methods: {
    inputChange() {
      this.options[1] = {
        value: this.value
      }
    }
  },
  components: {
    SearchOutlined
  },
  setup() {
    const filterOption = (input, option) => {
      console.log(input)
      console.log(option)
      return option.value.toUpperCase().indexOf(input.toUpperCase()) >= 0;
    };

    return {
      value: ref(''),
      options: ref([{
        value: 'Burns Bay Road',
      }, {
        value: 'Downing Street',
      }, {
        value: 'Wall Street',
      }]),
      filterOption,
    };
  },

});
</script>
<style scoped>
.search-button {
  border: 1px solid #d9d9d9;
  border-left: none;
}
</style>
